<template>
  <view>
    <v-easy-camera
        :fullscreen="true"
        ref="easyCamera"
        v-model="pictureData.picture"
    >
      <image
          class="mask_control_close"
          width="20px"
          height="20px"
          fit="cover"
          @click="cameraStop"
          :src="require('../../../static/images/add.png')"
      />
    </v-easy-camera>
    <img class="mask" :src="require('../../../static/images/camera_mask.png')">
    <img class="mask_control" style="width: 80px;height: 80px;" @click="cameraSnap"
         :src="require('../../../static/images/camera_mask.png')">
  </view>
</template>

<script>
import EasyCamera from "easy-vue-camera";

export default {
  name: "cameraCustom",
  components: {
    "v-easy-camera": EasyCamera,
  },
  data() {
    return {
      pictureData: {
        picture: "",
        pictureSize: "",
      },
      isEnable: true,
      myEasyCamera: null,
      confirmIsShow: false,
    };
  },

  mounted() {
    //获取原始控件区并隐藏（处理为移除子元素）
    let aaa = document.getElementsByClassName("camera-stack")[0];
    let div = document.createElement("div");
    div.className = "bott";
    div.style.height = "60px";
    div.style.widht = "100%";

    aaa.appendChild(div);
    let controlModel = document.getElementsByClassName(
        "camera-stack-controls"
    )[0];
    controlModel.removeChild(controlModel.firstChild);
    //获取拍照组件实例
    this.myEasyCamera = this.$refs.easyCamera;
  },
  methods: {
    // 点击关闭
    cameraStop() {
      // console.log("关闭");
      this.myEasyCamera.close();
      this.$emit("close");
    },
    // 点击拍照
    cameraSnap() {
      if (!this.isEnable) {
        return;
      }
      // console.log("拍照");
      this.myEasyCamera.snap();
      document.getElementsByClassName(
          "camera-stack-controls"
      )[0].style.display = "none";
      this.confirmIsShow = true;
      this.pictureData.pictureSize =
          this.getImageSize(this.pictureData.picture) / 1024 / 1024;
      this.isEnable = false;
      console.log(this.pictureData)
    },
    // 点击对号完成
    confirm() {
      // console.log("完成");
      this.isEnable = true;
      this.confirmIsShow = false;
      this.$emit("setPictureUrl", this.pictureData);
      this.$emit("close");
    },
    // 点击返回重拍
    cancel() {
      // console.log("重拍");
      this.isEnable = true;
      this.confirmIsShow = false;
      this.myEasyCamera.start();
    },
    // 获取照片大小
    getImageSize(base64Str) {
      const indexBase64 = base64Str.indexOf("base64,");
      if (indexBase64 < 0) return false;
      const str = base64Str.substr(indexBase64 + 6);
      return (str.length * 0.75).toFixed(2);
    },
  },
};
</script>

<style lang="scss" scoped>
.bott {
  position: absolute;
  background-color: black;
  width: 100%;
  z-index: 18;
}

.mask {
  position: absolute;
  z-index: 18;
  height: 100%;
  width: 100%;
}

.mask_control {
  position: absolute;
  z-index: 19;
  left: calc(50% - 40px);
  bottom: 40px;
  color: $uni-color-primary;
}

.mask_control_close {
  position: absolute;
  z-index: 18;
  right: 20px;
  top: 20px;
}

.mask_control_return {
  position: absolute;
  z-index: 18;
  left: 40px;
  bottom: 60px;
}
</style>

